<%--
  Created by IntelliJ IDEA.
  User: SuZePing
  Date: 2021/3/5
  Time: 22:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@include file="/WEB-INF/include/include-head.jsp"%>
	<link rel="stylesheet" href="static/css/pagination.css">
	<script src="static/jquery/jquery.pagination.js"></script>
	<script type="text/javascript" src="static/js/DrugMedicineJS.js"></script>
	<script type="text/javascript">
		$(function () {
			// 分页数据初始化
			window.pageNum = 1;
			window.pageSize = 5;
			window.medicineName = "";
			window.medicineType = "";

			// 调用分页函数
			generateMedicinePage();

			// 关键字查询
			$("#selByKeyword").click(function () {
				window.medicineName = $("#medicineNameInput").val();
				window.medicineType = $("#medicineTypeInput").val();
				// 页码初始化为第一页
				window.pageNum = 1;
				generateMedicinePage();
			});

			// 显示新增药品模态框
			$("#addMedicine").click(function () {
				// 清理模态框
				$("#addMedicineName").val("");
				$("#addMedicineType").val("");
				$("#addMedicineTotal").val("");
				$("#addMedicinePrice").val("");
				$("#medicineAddModal").modal("show");
			});

			// 药品新增
			$("#addMedicineSubmit").click(function () {
				var medicineName = $.trim($("#addMedicineName").val());
				var medicineType = $.trim($("#addMedicineType").val());
				var medicineTotal = $.trim($("#addMedicineTotal").val());
				if (medicineTotal < 0){
					layer.msg("药品数量不能设置为负数!");
					return false;
				}
				var medicinePrice = $.trim($("#addMedicinePrice").val());
				if (medicinePrice <= 0){
					layer.msg("药品单价必须为正数!");
					return false;
				}
				$.ajax({
					"url": "medicine/save.json",
					"type": "post",
					"data": {
						"medicineName":medicineName,
						"medicineType":medicineType,
						"medicineTotal":medicineTotal,
						"medicinePrice":medicinePrice
					},
					"dataType": "json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("新增药品成功！");
							// 显示到最后一页并重新加载分页数据
							var total = response.data;
							var page = Math.floor(total / window.pageSize);
							if (total % window.pageSize != 0){
								page = page + 1;
							}
							window.pageNum = page;
							generateMedicinePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				// 关闭模态框
				$("#medicineAddModal").modal("hide");
				// 清理模态框
				$("#addMedicineName").val("");
				$("#addMedicineType").val("");
				$("#addMedicineTotal").val("");
				$("#addMedicinePrice").val("");
			});

			// 显示修改药品模态框[由于修改按钮是动态生成的，所以使用on()]
			$("#medicinePageTBody").on("click",".editMedicineBtn",function () {
				$("#editMedicineModal").modal("show");
				// 回显
				$("#editMedicineId").val($(this).attr("medicineId"));
				$("#editMedicineName").val($(this).attr("medicineName"));
				$("#editMedicineType").val($(this).attr("medicineType"));
				$("#editMedicineTotal").val($(this).attr("medicineTotal"));
				$("#editMedicinePrice").val($(this).attr("medicinePrice"));
			});

			// 药品修改
			$("#editMedicineSubmit").click(function () {
				var medicineName = $.trim($("#editMedicineName").val());
				var medicineType = $.trim($("#editMedicineType").val());
				var medicineTotal = $.trim($("#editMedicineTotal").val());
				if (medicineTotal < 0){
					layer.msg("药品数量不能设置为负数!");
					return false;
				}
				var medicinePrice = $.trim($("#editMedicinePrice").val());
				if (medicinePrice <= 0){
					layer.msg("药品单价必须为正数!");
					return false;
				}
				$.ajax({
					"url": "medicine/edit.json",
					"type": "post",
					"data": {
						"medicineId":$("#editMedicineId").val(),
						"medicineName":medicineName,
						"medicineType":medicineType,
						"medicineTotal":medicineTotal,
						"medicinePrice":medicinePrice
					},
					"dataType":"json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("修改药品成功！");
							generateMedicinePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				// 关闭模态框
				$("#editMedicineModal").modal("hide");
			});

			// 药品删除
			$("#medicinePageTBody").on("click",".removeMedicineBtn",function () {
				var medicineId = $(this).attr("medicineId");
				var medicineName = $(this).attr("medicineName");
				if (confirm("您确认要删除[" + medicineName + "]药品？") == false){
					return false;
				}
				$.ajax({
					"url": "medicine/del.json",
					"type": "post",
					"data":{
						"medicineId":medicineId
					},
					"dataType":"json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("删除药品成功！");
							generateMedicinePage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
			});

		});
	</script>
</head>
<body>

<%@ include file="/WEB-INF/include/include-nav.jsp"%>
<div class="container-fluid">
	<div class="row">
		<%@include file="/WEB-INF/include/include-sidebar.jsp"%>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 id="title" class="panel-title"><i class="glyphicon glyphicon-th"></i> 药品列表</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" role="form" style="float:left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">药品名称</div>
								<input id="medicineNameInput" class="form-control has-success" type="text" placeholder="请输入药品名称">
							</div>
							&nbsp;&nbsp;
							<div class="input-group">
								<div class="input-group-addon">药品类型</div>
								<input id="medicineTypeInput" class="form-control has-success" type="text" placeholder="请输入药品类型">
							</div>
						</div>
						&nbsp;&nbsp;
						<button id="selByKeyword" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
					</form>
					<button type="button" id="addMedicine" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增</button>
					<br>
					<hr style="clear:both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead>
							<tr>
								<th width="30">#</th>
								<th>药品名称</th>
								<th>药品种类</th>
								<th>药品数量</th>
								<th>药品单价</th>
								<th>创建时间</th>
								<th width="100">操作</th>
							</tr>
							</thead>
							<tbody id="medicinePageTBody">
							<%-- 手动渲染数据 --%>
							</tbody>
							<tfoot>
							<tr>
								<td colspan="7" align="center">
									<div id="Pagination" class="pagination"><%-- 显示Pagination分页 --%></div>
								</td>
							</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<%-- 引入药品添加、修改模态框 --%>
<%@include file="/WEB-INF/modal/modal-medicine-add.jsp"%>
<%@include file="/WEB-INF/modal/modal-medicine-edit.jsp"%>
</body>
</html>
